import { useState } from "react";
import { Layout, Menu, Avatar, Dropdown, Button } from "antd";
import {
  UserOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons";
import logo from "./assets/react.svg";
import "./App.less";
import {
  Routes,
  Route,
  useNavigate,
  useLocation,
  Navigate,
} from "react-router-dom";
import React, { Suspense } from "react";
import menuItems from "./menu.config";

const { Header, Sider, Content } = Layout;

// 自动扫描pages目录下所有子目录的index.tsx，动态生成路由
function getPageRoutes() {
  const modules = import.meta.glob("./pages/**/index.tsx");
  return Object.keys(modules)
    .filter((path) => !/\/components\//i.test(path))
    .map((path) => {
      // ./pages/demo/Boo/index.tsx => /demo/boo
      const match = path.match(/\.\/pages\/(.*)\/index\.tsx$/);
      const key = match
        ? `/${match[1]
            .split("/")
            .map((seg) => seg.toLowerCase())
            .join("/")}`
        : path;
      return {
        key,
        element: React.lazy(modules[path]),
      };
    });
}
const pageRoutes = getPageRoutes();

function App() {
  const location = useLocation();
  const navigate = useNavigate();
  const [selectedKey, setSelectedKey] = useState(() => {
    const found = menuItems.find((r) => location.pathname.startsWith(r.key));
    return found ? found.key : menuItems[0].key;
  });
  const [collapsed, setCollapsed] = useState(false);
  const username = "Admin";

  const userMenu = (
    <Menu>
      <Menu.Item key="logout">退出登录</Menu.Item>
    </Menu>
  );

  const handleMenuClick = ({ key }) => {
    setSelectedKey(key);
    navigate(key);
  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        theme="light"
        width={200}
        collapsible
        collapsed={collapsed}
        // onCollapse={setCollapsed}
        className="b3-sider"
        trigger={null}
      >
        <div className="b3-logo">
          <img src={logo} alt="logo" />
          <span>个人助理</span>
        </div>
        <Menu
          mode="inline"
          theme="light"
          selectedKeys={[selectedKey]}
          onClick={handleMenuClick}
          style={{ height: "100%", borderRight: 0 }}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header className="b3-header">
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: "16px",
              width: 64,
              height: 64,
            }}
          />
          <div className="b3-userinfo">
            <Dropdown overlay={userMenu} placement="bottomRight">
              <span>
                <Avatar icon={<UserOutlined />} style={{ marginRight: 8 }} />
                {username}
              </span>
            </Dropdown>
          </div>
        </Header>
        <Layout style={{ padding: "12px" }}>
          <Content className="b3-content">
            <Suspense fallback={<div>页面加载中...</div>}>
              <Routes>
                <Route
                  path="/"
                  element={<Navigate to={menuItems[0].key} replace />}
                />
                {pageRoutes.map(({ key, element: Element }) => (
                  <Route key={key} path={key} element={<Element />} />
                ))}
              </Routes>
            </Suspense>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default App;
